<template>
  <el-row>
    <div class="l-content">
      <el-button
        type="primary"
        icon="el-icon-menu"
        size="small"
        @click="collaMenu"
      ></el-button>
      <el-breadcrumb separator="/" class="mainpage">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-if="menu" :to="{ path: menu.path }">{{
          menu.name
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link"><img :src="userImag" class="user"/></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="quit">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </el-row>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    //vuex提供的语法糖，this.menu=this.$store.state.tab.currentMenu
    ...mapState({
      menu: (state) => state.tab.currentMenu,
    }),
  },
  methods: {
    collaMenu(){
      //关闭侧边栏
      this.$store.commit('collaMenu')
    },
    quit(){
      //退出时，要清除token，回到登录界面
      this.$store.commit('clearToken');
      this.$router.push('/login')
    }
  },

  data() {
    return {
      userImag: require("../assets/images/1546053711-wyKASGsfqM.jpg"),
    };
  },
};
</script>

<style lang="scss" scoped>
//清楚伪类，使得justify-content: space-between可以生效
.el-row::after,
.el-row::before {
  display: none;
}
.el-row {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.l-content {
  display: flex;
  align-items: center;

  .el-button {
    margin-right: 20px;
  }
}
.user {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

// deep样式穿透，可以覆盖ui库里面的样式
/deep/ .el-breadcrumb__inner.is-link {
  color: white;
}
/deep/ .el-breadcrumb__inner.is-link:hover {
  color: blue;
}

/deep/ .el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: white;
}
/deep/ .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  color: blue;
}
</style>
